{{ header }}
<div id="account-gdpr" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle"></i> {{ success }} <button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}
  <div class="row">{{ column_left }}
    <div id="content" class="col">
      {{ content_top }}
      <h1>{{ heading_title }}</h1>
      <p>{{ text_gdpr|format(store, gdpr, title) }}</p>
      <fieldset>
        <legend id="account">{{ text_verification }}</legend>
        <div class="form-group">
          <p><label class="form-check-label" for="input-email">{{ text_email }}</label></p>
          <div class="input-group">
            <input type="text" name="email" value="{{ email }}" placeholder="{{ entry_email }}" id="input-email" class="form-control"/>
            <div class="input-group-append">
              <span class="input-group-text"><i class="fas fa-envelope"></i></span>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend id="action">{{ text_action }}</legend>
        <div class="form-group">
          <div class="form-check">
            <input type="radio" name="action" value="export" id="input-export" checked class="form-check-input"/> <label class="form-check-label" for="input-export"><strong>{{ text_export }}</strong></label>
          </div>
          <div class="form-check">
            <input type="radio" name="action" value="remove" id="input-remove" class="form-check-input"/> <label class="form-check-label" for="input-remove"><strong>{{ text_delete }}</strong></label>
            <div id="collapse-remove" class="alert alert-warning collapse">
              <p><i class="fas fa-exclamation-triangle"></i> {{ text_warning }}</p>
              <ul>
                <li>{{ text_access|format(store) }}</li>
                <li>{{ text_history }}</li>
                <li>{{ text_limit|format(limit) }}</li>
              </ul>
            </div>
          </div>
        </div>
      </fieldset>
      <div class="d-inline-block pt-2 pd-2 w-100">
        <div class="float-left"><a href="{{ cancel }}" class="btn btn-light">Cancel</a></div>
        <div class="float-right"><button type="button" id="button-continue" class="btn btn-primary">{{ button_continue }}</button></div>
      </div>
      {{ content_bottom }}
    </div>
    {{ column_right }}
  </div>
</div>
<script type="text/javascript"><!--
$('input[name=\'action\']').on('change', function() {
	if (this.value == 'remove') {
		$('#collapse-remove').slideDown();
	} else {
		$('#collapse-remove').slideUp();
	}
});

$('#button-continue').on('click', function() {
	var element = this;

	$.ajax({
		url: 'index.php?route=information/gdpr/action',
		type: 'post',
		data: $('input[name=\'email\'], input[name=\'action\']:checked'),
		dataType: 'json',
		beforeSend: function() {
			$(element).button('loading');
		},
		complete: function() {
			$(element).button('reset');
		},
		success: function(json) {
			console.log(json);
			$('.text-danger, .alert-dismissible').remove();

			if (json['error']) {
				if (json['error']['email']) {
					$('#input-email').parent().after('<div class="text-danger">' + json['error']['email'] + '</div>');
				}

				if (json['error']['action']) {
					$('#action').after('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error']['action'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
				}
			}

			if (json['success']) {
				$('.breadcrumb').after('<div class="alert alert-success alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});
//--></script>
{{ footer }}